import React from 'react';
import {StatusBar, StyleSheet, TextInput, View,} from 'react-native';
import * as Color from "../../constant/Color";
import RippleButton from "../btn/RippleButton";
import TouchButton from "../btn/HighlightButton";
import HttpHelper from "../../helper/HttpHelper";
import {UUID} from "../../util/UUID";
import SmsHelper from "../../helper/SmsHelper";

/** 忘记密码/找回密码 */
export default class FindBackPwd extends React.Component {

    static navigationOptions = ({ navigation }) => ({
        title: '找回密码',
        // header: null,
    });

    mSmsHelper:SmsHelper;

    constructor(props){
        super(props);
        this.state=({
            textBtnSms: '发送验证码',
        });

        // this.mSmsHelper = SmsHelper.getInstance();   // 单例
        this.mSmsHelper = new SmsHelper();
    }

    _smsCallback = (text:string) => {
        if(!text) return;
        this.setState({
            textBtnSms:text,
        });
    };

    render() {
        return (
            <View style={styles.container}>
                <StatusBar
                    // hidden={true}
                    // translucent={true}
                    backgroundColor={Color.colorPrimaryDark} />

                <TextInput
                    style={styles.label_value}
                    underlineColorAndroid={'transparent'}
                    placeholder={'手机号'}/>

                <View
                    style={styles.label_value_right}>
                    <TextInput
                        style={styles.right_1}
                        underlineColorAndroid={'transparent'}
                        placeholder={'验证码'}/>

                    <RippleButton styleText={styles.right_2} title={this.state.textBtnSms} onPress={()=>{this._sendSms()}}/>

                </View>

                <View style={styles.line_layout}>
                    <TouchButton styleTouch={styles.buttonTouch}
                                 underlayColor={Color.colorPrimaryDark}
                                 styleText={styles.buttonText}
                                 title={'提交'}
                                 onPress={()=>{ this._onSubmit() }}/>
                </View>

                <HttpHelper ref={'http'}/>
            </View>
        );
    }

    /** 发送验证码 */
    _sendSms():void{
        this.mSmsHelper.start(this._smsCallback);
    }


    /** 提交 */
    _onSubmit():void{
        if(!this.refs.http) return;
        this.refs.http.setURL("https://www.baidu.com/")
            .setMethod(HttpHelper.GET)
            .setNotiInfo("正在加载百度")
            .setHeadParams(new Map())
            .setBodyParams(new Map())
            .setRequestId(UUID.getOne())
            .setListener((responseCode:number, res:string) => {
                console.log("responseCode:" + responseCode + ", res:" + res);
                this._gotoLogin();
            })
            .setTimeout(10 * 1000)
            .start(true);
    }

    _gotoLogin(){
        const {navigate, goBack, state} = this.props.navigation;
        goBack();
        // navigate('drawer');
        // this.props.navigation.replace('drawer');
        // this.props.navigation.pop(1); // 弹1个
    }

}

const styles = StyleSheet.create({
    container: {
        flexDirection:'column',
        flex:1,
        // alignItems: 'center',
        // justifyContent: 'center',
        paddingLeft:25,
        paddingRight:25,
    },
    label_value: {
        height: 50,
        // width:100,
        color:Color.black,
        borderRadius:4,
        borderWidth:1,
        borderColor:Color.gray,
        marginBottom:10,
        marginTop:10,
    },
    label_value_right: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems:'center',
        height: 50,
        // width:100,
        borderRadius:4,
        borderWidth:1,
        borderColor:Color.gray,
        marginBottom:10,
        marginTop:10,
        paddingRight:5,
    },
    right_1: {
        flex:1,
        height: 50,
        // width:100,
    },
    right_2: {
        // width:100,
        fontSize: 16,
        color:Color.green,
    },
    line_layout: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        paddingTop:5,
        paddingBottom:5,
    },
    buttonTouch: {
        flex:1,
        height: 50,
        backgroundColor:Color.colorPrimary,
    },
    buttonText: {
        fontSize: 22,
        color:Color.white,
    },
});


